<script setup lang="ts">
import { useCustomTheme } from "@/framework/theme/store.ts";

const theme = useCustomTheme();
</script>

<template>
  <div :class="['app-content-container-bg', theme.variant]"></div>
</template>

<style lang="less">
.app-content-container-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.3;

  &.dark {
    background: url("bg-dark-01.webp") no-repeat;
    background-size: 100% 100%;
    filter: blur(20px);
  }

  &.light {
    background: url("bg-light-01.webp") no-repeat;
    background-size: 100% 100%;
    filter: blur(20px);
  }
}
</style>
